<template>
  <div class='container'>
    <!-- Form -->
    <el-dialog
     @close="btnCancel"
      width="42%"
      title="新增文章"
      :visible="showDialog"
    >
      <el-form
        :model="dialogForm"
        :rules="rules"
        ref="add"
      >
        <el-form-item
          label="文章标题"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="dialogForm.title"
            autocomplete="off"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="文章内容"
          prop="articleBody"
          :label-width="formLabelWidth"
        >
          <template>
            <div class="editor-container">
              <quill-editor
                class="info-editor"
                ref="QuillEditor"
                v-model="dialogForm.articleBody"

              >
              </quill-editor>
            </div>
          </template>
        </el-form-item>
        <el-form-item
          label="视频地址"
          prop="videoURL"
          :label-width="formLabelWidth"
        >
          <el-input
            autocomplete="off"
            placeholder="请输入视频地址"
            v-model="dialogForm.videoURL"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer >
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="btnCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="btnOK"
        >确 定</el-button>
      </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 富文本组件
import { quillEditor } from 'vue-quill-editor'
import { add, update, detail } from '@/api/hmmm/articles'
export default {
  name: 'editor',
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    dialogForm: {
      type: Object
    }
  },
  data () {
    return {
      // 富文本框配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用 、代码块
            ['image', 'link'] // 链接、图片
          ]
        },
        placeholder: '请输入正文'
      },
      formRules: {
        title: '',
        articleBody: '',
        videoURL: null
      },
      // 表单校验
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入内容', trigger: 'blur' }]
        // videoURL: [{ message: '请输入链接', trigger: 'blur' }]
      },

      formLabelWidth: '120px'
    }
  },
  created () {
    this.getDetail()
  },

  methods: {
    async getDetail () {
      await this.$nextTick()
      const res = await detail({ id: this.id })
      // console.log(res)
      this.formRules.title = res.data.title
    },
    btnOK () {
      this.$refs.add.validate(async (isOK) => {
        if (isOK) {
          if (this.dialogForm.id) {
            await update(this.dialogForm)
            this.$message.success('编辑成功')
          } else {
            await add(this.dialogForm)
            this.$message.success('新增成功')
          }
          this.$emit('queryDialog')

          this.$parent.getDataList()
          this.$emit('update:showDialog', false)
        }
      })
    },

    // 取消
    btnCancel () {
      // 重置原来的数据
      this.formRules = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$refs.add.resetFields() // 重置校验结果
      this.$emit('update:showDialog', false)
    }

  },
  watch: {
    dialog (newval) {
      // console.log(newval)
      this.dialog = newval
      // console.log(this.dialog)
    }
  }
}
</script>

<style scoped >
.info-editor {
  height: 120px;
  margin-bottom: 90px;
}
</style>
